<template>
  <div   v-if="open">
    <!-- AvatarPicker 上传与裁剪 -->
    <AvatarUpload
        v-model="imageData"
        :size="100"
        :circle="true"
        :preview="true"
        :width="300"
        :height="300"
        :background="true"
        :onClose="closeWin2"
        :onCustomRequest = 'SavePicture'
        class="centreTitle"
    />

    <!-- 显示裁剪后的头像 -->
    <div v-if="imageData">
      <h3>裁剪后的头像</h3>
      <img :src="imageData" alt="裁剪后的头像" />
    </div>
  </div>
</template>

<script setup lang="ts">
import {h, ref} from 'vue';
import {uploadFile2} from '@/api/modules/system/upload';
import 'vue-avatar-upload/lib/style.css';
import AvatarUpload from 'vue-avatar-upload';
import {updateDetailModeHeadApi} from "@/api/modules/detailModel/detailModeHead";
import type {DetailModeHeadForm} from "@/api/types/detailmodel/detailModeHead";
import {ElMessage} from "element-plus";

const imageData = ref(null);  // 用于存储裁剪后的头像数据

// 关闭窗口的方法
let closeWin = defineEmits(['closeWindow']);
let open = ref()
let headId = ref(null)
let closeWin2 = () => {
  closeWin('closeWindow', "power");
};


let openActorPicker = (id: any) => {
  headId.value = id
  open.value = true;
  
}

let closeActorPicker = () => {
  open.value = false;
}


let SavePicture = (file: File) =>{
  console.log("裁剪后的头像数据:", file);
  if (headId.value === null){
    console.error("没成功获取ID报错了",headId);
    return
  }

  try {
    // 假设你有一个 API 接口来上传头像
    const formData = new FormData();
    formData.append('avatar', file);  // 假设 imageData 是一个 Base64 字符串或 Blob 数据

    // 调用 uploadFile 函数上传头像
    uploadFile2({uploadSelf: file}).then(res =>{
      let url = res?.data
      console.error("asdfweasdfasfwerwer",url);
      let update : DetailModeHeadForm ={
        id: headId?.value,
        ext1: url,
      }
      updateDetailModeHeadApi(update).then(res =>{
        ElMessage.success('保存成功')
        open.value = false;
      })
    })

  } catch (error) {
    console.error('上传头像失败:', error);
  }

}

/**
 * 根据不同级别显示不同大小的字体
 * 这里不用能computer，因为返回的是一个getter方法而不是字符串
 */
let computedResulte = (node: any) => {
  return `level-${node.level}`;
}

defineExpose({openActorPicker,closeActorPicker})

</script>

<style scoped>
@import 'cropperjs/dist/cropper.css';

.centreTitle {
  color: black;
}
</style>
